<template>
  <div id="app" class="df fd ac">
    <!-- 头部 -->
    <div class="header">
      <h1>
        <img @click="back" class="left-arrows" src="../../../assets/img/home-img/left-arrows.png" alt="">
        救援记录
      </h1>
    </div>
    <div class="box" v-for="(el, inde) in orderForm" :key="el.rescueId">
      <div class="title">
        <p class="f30" style="margin: 8rem 0 20rem;color:#2E7EF8">{{ el.rescueType | fun }}</p>
        <p class="f20" style="color:#818181;">{{ el.time }}</p>
      </div>
      <hr>
      <p style="margin-top: 34rem;">
        <span class="f20">订单编号：</span>
        <span class="f20" style="color:#818181;">{{ el.rescueId }}</span>
      </p>
      <p style="margin-top: 34rem;" v-if="el.rescueType == 2?true:false">
        <span class="f20">起始位置：</span>
        <span class="f20" style="color:#818181;">{{ el.rescuePosition }}</span>
      </p>
      <p style="margin-top: 34rem;" v-if="el.rescueType == 2?true:false">
        <span class="f20">终止位置：</span>
        <span class="f20" style="color:#818181;">{{ el.destinationPosition }}</span>
      </p>
      <p style="margin-top: 34rem;" v-else>
        <span class="f20">位置：</span>
        <span class="f20" style="color:#818181;">{{ el.rescuePosition }}</span>
      </p>
      <p style="margin-top: 34rem;">
        <span class="f20">车牌：</span>
        <span class="f20" style="color:#818181;">{{ el.plateNumber }}</span>
      </p>
    </div>
  </div>
</template>
<script>
import { record } from '@/api/urgency'
export default {
  mounted() {
    record({
      index:1,
      pageSize:10,
    })
      .then(r => {
        console.log(r.data.records);
        this.orderForm = r.data.records
        // this.orderForm = 
      })
  },
  filters: {
    fun(index){
      switch(index){
        case 0: return '搭电';
        case 1: return '换胎';
        case 2: return '拖车';
      }
    }
  },
  methods: {
    back() {
      this.$router.push({
        path: '/rescueIndex'
      })
    }
  },
  data() {
    return {
      orderForm: [
        // {
        //   nape: '换胎',
        //   time: '2000-09-15',
        //   id: '32164984321',
        //   place: '河南省濮阳市华龙区',
        //   board: '奔驰LL0915'
        // },
        // {
        //   nape: '拖车',
        //   time: '2000-09-15',
        //   id: '65498312654',
        //   place: '河南省濮阳市华龙区',
        //   start: '河南省濮阳市华龙区',
        //   finish: '河南省濮阳市华龙区',
        //   board: '奔驰LL0915'
        // },
        // {
        //   nape: '换胎',
        //   time: '2000-09-15',
        //   id: '3213246320321',
        //   place: '河南省濮阳市华龙区',
        //   board: '奔驰LL0915'
        // },
        // {
        //   nape: '电',
        //   time: '2000-09-15',
        //   id: '6579813198',
        //   start: '河南省濮阳市华龙区',
        //   finish: '河南省濮阳市华龙区',
        //   board: '奔驰LL0915'
        // },
      ]
    }
  },

}
</script>

<style scoped>
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

hr {
  height: 4rem;
  background-color: #F7F7F7;
}

.df {
  display: flex !important;
}

.fd {
  flex-direction: column !important;
}

.jc {
  justify-content: center !important;
}

.ac {
  align-items: center !important;
}

.j-a {
  justify-content: space-around !important;
}

.j-b {
  justify-content: space-between !important;
}

.left-arrows {
  height: 40rem;
  position: absolute;
  left: 24rem;
}

.header {
  position: absolute;
  width: 100%;
  height: 436rem;
  z-index: 0;
  background-image: url('../../../assets/img/home-img/bg.png');
  background-size: 100%;
  top: 0rem;
}

.header h1 {
  text-align: center;
  font-size: 36rem;
  color: white;
  margin: 70rem 0 48rem;
}

.box {
  background-color: white;
  border-radius: 15rem;
  padding: 32rem;
  width: 92%;
  box-sizing: border-box;
  margin-top: 18rem;
  z-index: 1;
}

#app {
  background-color: #F7F7F7;
  padding: 148rem 0 170rem;
}
</style>